<div id="app">
  {{ message }}
</div>
<hr />

<h4>
  v-bind: 缩写`:`, 即一个冒号，绑定属性。
  <br>
  普通属性不用v-bind, v-bind绑定的vue数据，需要vue组件中声明，即js代码里写。
</h4>
<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds to see my dynamically bound title!
  </span>
</div>
<hr />

<h4>v-if='var', var变量值控制是否渲染</h4>
<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>
<hr />

<h4>v-on: 缩写`@`，即一个冒号</h4>
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
<hr />

<h4>v-model, 数据和input绑定</h4>
<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
<hr />

<h4>v-for</h4>
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
<hr />

<h4>自定义组件</h4>
<textarea disabled readonly style="width: 50%; height: 66px; overflow: hidden; resize: none; margin-left: 22px;">
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
</textarea>
<div id="app-7">
  <ol>
    <!-- Now we provide each todo-item with the todo object    -->
    <!-- it's representing, so that its content can be dynamic -->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>


<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });

  var app2 = new Vue({
    el: '#app-2',
    data: {
      message: 'You loaded this page on ' + new Date()
    }
  });

  var app3 = new Vue({
    el: '#app-3',
    data: {
      seen: true
    }
  });

  var app4 = new Vue({
    el: '#app-4',
    data: {
      todos: [{
        text: 'Learn JavaScript'
      }, {
        text: 'Learn Vue'
      }, {
        text: 'Build something awesome'
      }]
    }
  });

  var app5 = new Vue({
    el: '#app-5',
    data: {
      message: 'Hello Vue.js!'
    },
    methods: {
      reverseMessage: function() {
        this.message = this.message.split('').reverse().join('')
      }
    }
  });

  var app6 = new Vue({
    el: '#app-6',
    data: {
      message: 'Hello Vue!'
    }
  });

  // Define a new component called todo-item
  Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
  })
  var app7 = new Vue({
    el: '#app-7',
    data: {
      groceryList: [{
        text: 'Vegetables'
      }, {
        text: 'Cheese'
      }, {
        text: 'Whatever else humans are supposed to eat'
      }]
    }
  });

</script>
<style>
  hr {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  h4 {
    margin-top: 5px;
    margin-bottom: 10px;
  }
</style>
